<template>
  <van-popup
    v-model="visible"
    round
    position="bottom"
    closeable
    close-icon-position="top-left"
    class="coupon-popup"
  >
    <div class="title">优惠券</div>
    <div class="content">
      <van-radio-group v-model="selected">
        <div
          v-for="item in coupons"
          :key="item.id"
          class="coupon-item"
          @click="onSelectCoupon(item)"
        >
          <div class="left">
            <div>
              <span>¥</span>
              {{ item.price }}
            </div>
            <span v-show="item.min" class="min">{{ `满${item.min}可用` }}</span>
          </div>

          <div class="right">
            <div class="info">
              <div class="name">{{ item.name }}</div>
              <div class="desc">{{ `限${item.from}至${item.to}使用` }}</div>
            </div>
            <van-icon
              :name="item.id === selected ? 'checked' : 'circle'"
              :color="item.id === selected ? '#4586FF' : '#D7DFE8'"
              size="19"
            />
          </div>

          <div class="top-dot"></div>
          <div class="bottom-dot"></div>
        </div>

        <div class="nonuse" @click="onSelectCoupon({ id: 0 })">
          不使用优惠券
          <van-icon
            :name="selected ? 'circle' : 'checked'"
            :color="selected ? '#D7DFE8' : '#4586FF'"
            size="19"
          />
        </div>
      </van-radio-group>
    </div>
  </van-popup>
</template>

<script>
import Vue from 'vue'
import { Popup, RadioGroup } from 'vant'

Vue.use(Popup).use(RadioGroup)

export default {
  data() {
    return {
      coupons: [
        {
          id: 1,
          name: '省10元：优惠券',
          price: 10,
          from: '2020.05.16',
          to: '2020.08.16',
          min: '',
          limit: '简历精修课'
        },
        {
          id: 2,
          name: '省20元：优惠券',
          price: 20,
          from: '2020.05.16',
          to: '2020.08.16',
          min: '200',
          limit: '简历精修课'
        },
        {
          id: 3,
          name: '省18元：优惠券',
          price: 18,
          from: '2020.05.16',
          to: '2020.08.16',
          min: '',
          limit: '简历精修课'
        }
      ],
      selected: '',
      visible: false
    }
  },

  methods: {
    open() {
      this.visible = true
    },

    onSelectCoupon(e) {
      this.selected = e.id
      this.$emit('select', e)
    }
  }
}
</script>

<style lang="less" scoped>
.coupon-popup {
  min-height: 30%;
  max-height: 70%;

  .cross-icon {
    position: absolute;
    top: 20.5px;
    left: 17px;
    color: #b9c5d2;
  }

  .title {
    font-size: 18px;
    color: #222222;
    text-align: center;
    margin-top: 15px;
  }

  .content {
    margin-top: 6px;

    .nonuse {
      width: calc(100% - 74px);
      margin: 10px auto 57px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 20px;
      color: #666666;
      font-size: 16px;
      background-color: #ededed;
      border-radius: 5px;
    }

    .coupon-item {
      width: calc(100vw - 34px);
      margin: 10px auto;
      position: relative;
      display: flex;
      height: 100px;
      background: linear-gradient(to bottom, #f8fbff, #ebf2ff);
      border-radius: 5px;

      .top-dot,
      .bottom-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ffffff;
        position: absolute;
        left: 88px;
      }

      .top-dot {
        top: -5px;
      }

      .bottom-dot {
        bottom: -5px;
      }

      .left {
        width: 92px;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        color: #ff6669;
        border-right: 2px dotted rgba(206, 206, 206, 0.3);

        .min {
          font-size: 12px;
          margin-top: 4px;
        }

        div {
          display: flex;
          align-items: flex-start;
          font-size: 36px;
          line-height: 36px;
          font-weight: 500;

          span {
            font-size: 14px;
            line-height: 24px;
            margin-right: 3px;
          }
        }
      }

      .right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px 0 12.5px;

        .info {
          .name {
            font-size: 18px;
            color: #222222;
          }

          .desc {
            font-size: 12px;
            color: #999999;
            margin-top: 2px;
          }
        }
      }
    }
  }
}
</style>